<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客注册页</title>

    <!-- 复用登录页样式 -->
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/login.css">
</head>

<body>
    <!-- 导航栏（与登录页完全一致） -->
    <div class="nav">
        <img src="pic/nuc_logo.jpg" alt="">
        <span class="blog-title">我的博客系统</span>
        <div class="space"></div>
        <!-- 注册页无需导航链接，保持注释状态 -->
        <!-- <a class="nav-span" href="blog_list.html">主页</a> -->
        <!-- <a class="nav-span" href="blog_edit.html">写博客</a> -->
    </div>

    <!-- 注册容器 -->
    <div class="container-login">
        <div class="login-dialog">
            <h3>注册</h3>
            <form id="registerForm"> <!-- 添加表单标签方便后续验证 -->
                <div class="row">
                    <span>用户名</span>
                    <input type="text" name="username" id="regUsername" required>
                </div>
                <div class="row">
                    <span>密码</span>
                    <input type="password" name="password" id="regPassword" required>
                </div>
                <div class="row">
                    <span>个人网址</span>
                    <input type="text" name="githubUrl" id="regGithubUrl">
                </div>
                <div class="row">
                    <button type="button" id="registerBtn">注册</button>
                </div>
                <!-- 登录页跳转链接 -->
                <div class="row">
                    <span>已有账号？</span>
                    <a href="blog_login.html" class="login-link">点击登录</a>
                </div>
            </form>
        </div>
    </div>

    <!-- 引入jQuery -->
    <script src="js/jquery.min.js"></script>
    <script>
        // 使用事件监听器代替onclick属性
        $(document).ready(function () {
            $("#registerBtn").click(function () {
                register();
            });
        });

        function register() {
            // 获取表单值
            const userName = $("#regUsername").val();
            const password = $("#regPassword").val();
            const githubUrl = $("#regGithubUrl").val(); // 修正ID选择器

            // 表单验证
            if (!userName || !password) {
                alert("用户名和密码为必填项");
                return;
            }

            // 发送注册请求
            console.log("准备发送注册请求:", { userName, password, githubUrl });
            $.ajax({
                type: "post",
                url: "/user/register",
                contentType: "application/json",
                data: JSON.stringify({
                    userName: userName,
                    password: password,
                    githubUrl: githubUrl
                }),
                success: function (result) {
                    console.log("注册请求成功:", result);
                    if (result != null && result.code == "SUCCESS") {
                        alert("注册成功，请登录");
                        location.href = "blog_login.html";
                    } else {
                        alert(result.errMsg || "注册失败，请重试");
                    }
                },
                error: function (error) {
                    console.error("注册请求失败:", error);
                    alert("网络请求失败");
                }
            });
        }

        // 辅助函数：验证URL格式
        function isValidUrl(url) {
            try {
                new URL(url);
                return true;
            } catch (error) {
                return false;
            }
        }
    </script>
</body>

</html>